:root {
  --cell-count-per-row-in-collection: 5;
  --section-viewport-width-half: ~'calc(50vw - var(--margin-x-small))';

  // ----------- news sections begin -------
  // 反向求宽度极值
  // coverExtremeHeight = cell-height * 4 +  3 * 2 * cell-margin = 448px
  // sectionExtremeWidth = 2 * (4 * coverExtremeHeight / 3 + 2 * 8) + 2 * 40 = 1306.66666667px

  // 1920 ~ 8k   min-width = 1920*0.8 = 1536px
  // max-width = 1920px - 2 * 40px = 1840px
  --news-section-width-large: ~'calc( min(1840px, 80vw) )';

  // 1920px ~ 1307px
  // max-width = 1920*0.8 = 1536px
  // min-with = 1307 - 2 * 40px = 1227px
  --news-section-width-medium: ~'calc( max(1227px, min(1536px , 90vw) ) )';

  // 1306px ~ 1024px
  // max-with = 1306 - 2 * 40px = 1227px
  // min-with = 1024 - 2 * 20px = 984px
  --news-section-width-small: ~'calc( max(984px, min(1226px, 95vw) ) )';

  //----------- news sections end -------

  //默认在此处占位，再不同屏幕分辨率下显示不同 需要在@media下覆盖--news-section-width-large medium small
  --news-section-width: 100vw;
  --news-cover-width: ~'calc(var(--news-section-width)/2 - 2 * 8px)';
  --news-cover-height: ~'calc(3 * var(--news-cover-width) / 4)';
  --news-collection-width: var(--news-cover-width);
  --news-cell-cover-height: ~'calc( ( var(--news-cover-height) - 3 * 2 * var(--margin-x-small) - 4 * 2 * var(--padding-medium)) / 4 )';
  --forums-cell-cover-height: ~'calc( ( var(--news-cover-height) - 3 * 2 * var(--margin-x-small)) / 4 )';
  --news-cell-cover-width: ~'calc( 4 * var(--news-cell-cover-height) / 3)';
  --news-cover-img-width: ~'calc( min(1929px * 0.35, 35vw) )';
  --news-cover-img-height: ~'calc( 2 * var(--news-cover-img-width) / 3 )';
  --news-cell-height-home: ~'calc( (var(--news-cover-img-height) - 5 * 2 * var(--margin-x-small) )/5 )';
}

@media screen and (min-width: 1920px) {
  :root {
    --news-section-width: var(--news-section-width-large);
  }
}

@media screen and (min-width: 1307px) and (max-width: 1919px) {
  :root {
    --news-section-width: var(--news-section-width-medium);
  }
}

@media screen and (min-width: 1024px) and (max-width: 1306px) {
  :root {
    --news-section-width: var(--news-section-width-small);
    --news-cell-cover-height: ~'calc( ( var(--news-cover-height) - 3 * 2 * var(--margin-x-small) - 4 * 2 * 8px) / 4 )';
  }
  //77.5
  .collection-news .container {
    padding: 8px;
  }
}

.section-content {
  margin: 0 auto;
  width: var(--collection-content-width);
  padding: var(--padding-medium) 0px;
}

.section-header {
  padding: var(--padding-x-small) 0px;
}

.more-footer {
  display: flex;
  justify-content: center;
  padding: var(--padding-x-small) 0px;
}

.more-footer h5 {
  color: var(--r-primary-color);
}

.more-footer .container {
  margin: 0 0;
  padding: 10px 0px;
  width: 120px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  text-align: center;
  align-items: center;
  color: var(--r-primary-color);
}

.more-footer img {
  margin: 0 0;
  padding: 0 0;
  width: 16px;
  height: 16px;
}

.cover-collection-container {
  display: flex;
  flex-direction: row;
}


